امروزه از فلاتر برای توسعه اپلیکیشن های موبایلی و حتی وب اپلیکیشن ها و وب سایت ها استفاده می شود. نسخه دسکتاپ فلاتر هنوز در نسخه بتا است اما  flutter 2.0 با نسخه پایدار Flutter web منتشر شده که این بدین معناست اکنون توجه به وب بیشتر از گذشته است، و مخاطبان هدف، بسیار بزرگتر می شوند. اما وب سایتی که با فلاتر ساخته می شود به راحتی قابل دسترس نیست، به صورتیکه کاربران بتوانند فقط آن را در موتورهای جستجو مانند گوگل تایپ کرده و صفحات منتشر شده را در نتایج آن ببینند. زمانی که از فلاتر برای وب سایت های بیزینسی و یا فروشگاه های اینترنتی استفاده می کنیم سئوی آن بیشتر مهم می شود. به طور کلی زمانی که می‌خواهیم با افزایش شاخص جستجو به مخاطب پیشنهاد دهیم اپلیکیشن ما را انتخاب کند، سئو اولویت اصلی است.

آیا سئو با flutter web امکان پذیر است؟

اگر فقط میخواهید پاسخ به این سوال را بدانید وقت شما را تلف نمی کنم مستقیم می گویم بله امکان پذیر است. و اگه به دنبال نحوه ی چگونگی انجام آن هستید پس حتما تا آخر این پست را بخوانید.

آیا می شود صفحات وب فلاتر را سئو کرد؟ چنین سوالی قبل یا بعد از توسعه برنامه وب برای flutter به ذهن خطور می کند. در ادامه مراحلی که برای سئو صفحات یک اپلیکیشن فلاتر مورد نیاز است را شرح خواهم داد.

سئو چیست؟
بهینه سازی موتور جستجو یا همان SEO فرآیند بهبود کیفیت و کمیت ترافیک وب سایت  یا یک صفحه وب از موتورهای جستجو است. سئو به جای ترافیک مستقیم یا ترافیک پولی، ترافیک بدون پرداخت را هدف قرار می دهد. یعنی بدون هزینه مداوم برای گرفتن ترافیک به وب سایتتان، سایت خود را در گوگل یا هر موتور جستجوی دیگری محبوب می کنید و بر اساس ارزش محتوایی وب سایتتان به طور مدوام بازدیدکنندگان و جستجوگران را به سایت خود جذب می کنید.

SEO-friendly یا سئو دوستانه چیست؟
ایجاد یک وب سایت سازگار با سئو به این معنی است که گوگل و سایر موتورهای جستجو می توانند هر صفحه را در وب سایت به طور موثر بررسی کنند، محتوا را به طور مؤثر تفسیر کنند و آن را در پایگاه داده خود فهرست کنند. پس از ایندکس شدن، می‌توانند مرتبط‌ ترین و ارزشمندترین صفحات وب را بر اساس موضوعاتی که جستجو می‌کنند به کاربران خود ارائه دهند.

مراحل انجام کار مشابه سئو کردن صفحات وبی است که تاکنون سئو کرده اید به جز موارد خاصی که در ادامه توضیح خواهم داد.

مراحل انجام سئوی صفحات وب فلاتر

  • طول عنوان باید حداقل 207 کاراکتر باشد.
  • طول توضیحات حداقل 690 کاراکتر مفید باشد.
  • باید کلمات کلیدی  در index.html اضافه شود (کلمه کلیدی باید مطابق با محتوای صفحه مناسب باشد و برای آرشیو سئوی خوب باید حداقل 10 کلمه کلیدی اضافه شود).
  • برای نمایش موبایلی باید نمایش رسپانسوی داشته باشید. (بعنی وقتی کاربر در موبایل صفحه وب شما را می بینید وب سایت باید با اندازه ی صفحه نمایش تعامل پذیر باشد).
  • استفاده از پکیج seo_render برای Wrapping کردن هر ویجتی که در اپلیکیشن خود از آن استفاده کرده اید مانند (Text, image, link)،
  • همچنین استفاده از ویجت Semantics که می تواند به سئوی وب سایت کمک کند.

نحوه ی استفاده از پکیج seo_render در فلاتر

از کتابخانه seo_render برای رندر کردن ویجت های متنی به عنوان عناصر HTML استفاده می شود. نحوه کار ساده است، فقط مراحل زیر را دنبال کنید.

  • ابتدا باید یک RouteObserver اضافه کنیم تا به‌طور خودکار عناصر Html را هنگام بیرون آمدن از پشته ناوبری حذف کنیم. برای انجام این کار کافی است این خط را در MaterialApp اضافه کنید.
navigatorObservers: <RouteObserver<ModalRoute<void>>[routeObserver],
  • این وابستگی را به pubspec.yaml خود اضافه کنید.
dependencies:
seo_renderer: ^0.2.0
  • با دستور زیر پکیج مورد نظر را دریافت کنید.
flutter packages get
  • تمامی ویجت های متن، تصاویر و پیوندها باید به این صورت wrap شوند.
//Rendering Text (Just pass your Text/RichText)
TextRenderer(
text: Text(
'Text here'),
),
//Rendering Link
LinkRenderer(
anchorText: 'Flutter',
link: 'https://www.flutter.dev',
child: OutlinedButton(
onPressed: () {
launch('https://www.flutter.dev');
},
child: Text('Flutter.dev'),
),
),
//Rendering Image
ImageRenderer(
alt: 'Flutter logo',
link:
'https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup.png',
child: Image.network(
"https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup.png"
),
),
  • TextRenderer فقط ویجت های Text/RichText را پاس می دهد و از اپشن RenderController برای رفرش کردن محتوا (content(position)) در حالت محتوای قابل پیمایش استفاده شود.
  • در LinkRenderer باید child و anchorText و link و همچنین اپشن RenderController مقدار دهی شود.
  • در ImageRenderer باید child و link و alt و اپشن RenderController مقدار دهی شود.

 

ویجت Semantics

این ویجت، درخت ویجت را با توضیح در مورد معنای ویجت ها تفسیر می کند. در واقع از آن برای برای تعیین معنای برنامه ها توسط ابزارهای دسترسی، موتورهای جستجو و سایر نرم افزارهای تحلیل معنایی استفاده می شود. semantics اطلاعات را در اختیار سرویس‌های دسترسی در موبایل قرار می‌دهد.

semantics زمانی که می خواهید فقط 1 ویجت خاص را توصیف کنید.

MergeSemantics زمانی که می خواهید گروهی از ویجت ها را توصیف کنید. در این صورت، Semantics های مختلف که در زیر درخت این گره تعریف خواهد شد، در یک Semantics واحد ادغام خواهند شد. که می تواند برای گروه بندی مجدد معناشناسی بسیار مفید باشد، با این حال، در صورت وجود معنایی متناقض، نتیجه ممکن است بی معنی باشد.

ویژگی های Semantics :

ویژگی های زیادی در Semantics وجود دارد مانند:

label: توضیحات متنی را برای ویجت فراهم می کند. که در واقع اطلاعات semantic پایه است.

container: اینکه آیا این گره یک گره معنایی جدید (SemanticsNode) را در درخت معنایی معرفی می کند یا خیر. که البته نمی توان آن را با semantics لایه های بالایی ادغام یا جدا کرد، یعنی مستقل هستند.

explicitChildNodes: پیش‌فرض False است، نشان می‌دهد که آیا نمایش اطلاعات semantic ویجت فرزند اجباری شود یا خیر.

scopesRoute: اگر خالی نباشد، حتی اگر گره مربوط به ریشه درخت فرعی باشد، درخت فرعی باید نام مسیر را اعلام کند. معمولاً با explicitChildNodes آن را با هم روی true تنظیم کنید، و از آن در routing jumps، مانند Page jumps، Dialog، BottomSheet، و PopupMenu استفاده کنید.

در اینجا برخی از ویژگی های semantics نشان داده شده است،

Semantics(
label: 'Counter button',
hint: 'Press to increase',
value: '$_counter',
onTap: () { setState(() { _counter++; }); }
child: Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
);

و این نکته هم توجه کنید که اگر می‌خواهید Semantics برنامه خود را دیباگ کنید، می‌توانید ویژگی showSemanticsDebugger را در MaterialApp خود روی true تنظیم کنید. این امر فلاتر را مجبور می کند تا یک پوشش برای تجسم درخت Semantics ایجاد کند.

 

حرف آخر

با دنبال کردن این مراحل می توانید سئوی وب سایت خود را SEO Friendly کنید اما با این حال، موارد زیادی وجود دارد که می تواند یک وب سایت را سئو دوستانه کند. و فقط این مراحل نمی توانند باعث افزایش سئوی وب flutter شوند، اما می توانند وب سایت را سئو دوستانه کند.